<template>
  <div class="container">
    <head-title class="title">最美逆行者</head-title>
    <br />
    <br />
    <div class="content_video">
      <div class="content_video">
        <!-- 使用组件video-player -->
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
        ></video-player>
      </div>
    </div>

    <div id="main_3">
      <div class="box_part3" id="f3">
        <div class="wrapper3 clearfix3">
          <div class="box3" style="width: 1780px">
            <div class="hd3" style="font-size: 18px; background: #e39359">
              战疫英雄
            </div>
            <div class="bd3" style="min-height: 380px">
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">钟南山</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://ysg.ckcest.cn/html/details/706/index.html"
                    target="_blank"
                  >
                    <img
                      src="http://www.cae.cn/cae/admin/upload/img/20150422094330179517651.jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">李文亮</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E6%9D%8E%E6%96%87%E4%BA%AE/24300481?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/9a504fc2d5628535e5dd58f63fa761c6a7efcf1bc599?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">张定宇</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%BC%A0%E5%AE%9A%E5%AE%87/24286859?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/0823dd54564e9258d1091b107fcac658ccbf6d81e0be?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">李兰娟</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E6%9D%8E%E5%85%B0%E5%A8%9F/1349630?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/c2cec3fdfc039245c797795a8894a4c27d1e2540?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">张文宏</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%BC%A0%E6%96%87%E5%AE%8F/6431153?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/f9198618367adab49af0011984d4b31c8701e44c?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">张继先</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%BC%A0%E7%BB%A7%E5%85%88/24301414?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/d52a2834349b033b424de48d1ace36d3d439bd9b?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">王辰</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E7%8E%8B%E8%BE%B0/878985?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/b21bb051f8198618fbc7e6c849ed2e738ad4e6fe?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">张伯礼</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%BC%A0%E4%BC%AF%E7%A4%BC/1521965?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/f31fbe096b63f6246b60c0eae50efcf81a4c500f058d?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">张思兵</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%BC%A0%E6%80%9D%E5%85%B5/24303313?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/8c1001e93901213fb80e8a4e27ad21d12f2eb9383f44?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">彭银华</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%BD%AD%E9%93%B6%E5%8D%8E/24422999?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/7acb0a46f21fbe096b638bccc4281b338744eaf80798?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">单霞</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%8D%95%E9%9C%9E/24300185?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/e61190ef76c6a7ef1e483070f2faaf51f3de667e?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">刘森波</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%88%98%E6%A3%AE%E6%B3%A2/24450966?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/3b87e950352ac65c1038c18f4ebaa5119313b17e1cbc?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">朱海秀</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E6%9C%B1%E6%B5%B7%E7%A7%80/24422928?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/a71ea8d3fd1f4134d3e751262a1f95cad0c85e91?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">马承武</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E9%A9%AC%E6%89%BF%E6%AD%A6/24303234?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/79f0f736afc3793110b86370e4c4b74542a91192?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
              <div class="item3" style="width: 20%">
                <div class="txt3" style="text-align: center">
                  <span style="color: #b13a27">夏思思</span>
                  <br />
                </div>
                <div class="part3_img">
                  <a
                    href="https://baike.baidu.com/item/%E5%A4%8F%E6%80%9D%E6%80%9D/24433610?fr=aladdin"
                    target="_blank"
                  >
                    <img
                      src="https://bkimg.cdn.bcebos.com/pic/b151f8198618367adab40f05813b9cd4b31c86014f98?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
                      style="width: 125px; height: 150px; margin: 0 auto"
                    />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import HeadTitle from '../'
// 组件内引用vue-video-player插件
import { videoPlayer } from "vue-video-player";
export default {
  name: "HomeVideo",

  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "4:3", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            src:
              "https://vd4.bdstatic.com/mda-kb4tbx7ye90dc7g3/v1-cae/sc/mda-kb4tbx7ye90dc7g3.mp4?v_from_s=gz_videoui_4135&auth_key=1609992056-0-0-bff026481f122e4b4377e396a1804201&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=8656_2-8657_2", // 路径
            type: "video/mp4", // 类型
          },
          {
            src: "//path/to/video.webm",
            type: "video/webm",
          },
        ],
        poster:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200401%2F35c8f71457ab4bbc84341cb8a986f1bc.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612583108&t=1abfff21d3a2aa55df614a0d3807dff5", // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      },
    };
  },
  components: {
    videoPlayer,
  },
};
</script>
<style scoped>
.title {
  text-align: center;
}
.container {
  text-align: center;
}

.box_part3 {
  padding: 56px 0 80px;
}
.wrapper3 {
  margin: 0 auto;
  width: 1780px;
}
.clearfix3 {
  clear: both;
  zoom: 1;
}
.box_part3 .box3 {
  float: left;
  width: 670px;
  background: #fff;
}
.box_part3 .box3 .hd3 {
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
}
.box_part3 .box3 .hd3 a {
  color: #fff;
}

.box_part3 .box3 .bd3 .item3 {
  height: 190px;
  width: 33.3333333%;
  float: left;
  box-sizing: border-box;
  border-right: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  padding: 5px 5px;
  position: relative;
}
.box_part3 .box3 .bd3 .item3 .txt3 {
  position: relative;
  z-index: 2;
  font-size: 13px; /*前言*/
  line-height: 24px;
  color: #000;
}
.box_part3 .box3 .bd3 .item3 .part3_img img {
  display: block;
  height: 120px;
}
.bd3 {
  width: 100% !important;
}
</style>